<!--
 * @Description: 
 * @Author: Xwd
 * @Date: 2023-06-19 00:10:10
 * @LastEditors: Xwd
 * @LastEditTime: 2023-06-22 01:21:07
-->
<template>
  <b-container>
    <b-row>
      <b-col sm="6">
        <label for="input-book_name">书籍名称:</label>
        <b-form-input id="input-book_name" v-model.trim="queryParams.bookName"></b-form-input>
      </b-col>
      <b-col sm="6">
        <label for="input-book_name">详细信息:</label>
        <b-form-input id="input-book_name" v-model.trim="queryParams.detailInfo"></b-form-input>
      </b-col>
    </b-row>
    <div class="btn-groups">
      <b-button variant="success" @click="execute('query')">查询书籍</b-button>
      <b-button variant="danger" @click="execute('cancel')">取消查询</b-button>
    </div>
    <!-- 搜索结果列表 -->
    <b-row>
      <b-table striped hover primary-key="bookID" :sort-by="sortBy" :sort-desc="sortDesc" :items="bookList"
        :fields="fields">
        <template v-slot:cell(show_details)="row">
          <b-button size="sm" variant="success" @click="rowClickHandler(row.item, 'detail')"
            class="mr-2 button-class">查看</b-button>
          <b-button size="sm" variant="outline-primary" @click="rowClickHandler(row.item, 'edit')"
            class="mr-2 button-class">编辑</b-button>
          <b-button size="sm" variant="danger" @click="rowClickHandler(row.item, 'delete')"
            class="mr-2 button-class">删除</b-button>
        </template>
      </b-table>
    </b-row>

    <!-- <b-modal id="modal-1" :title="modalParams.title" :centered="modalParams.centered" :visible="modalParams.visible"
      ok-title="确认" cancel-title="关闭" :hide-header-close="true" @ok="confirmHandler" @close="closeHandler"> -->
    <b-modal id="modal-1" :title="modalParams.title" :centered="modalParams.centered" ok-title="确认" cancel-title="关闭"
      :hide-header-close="true" @ok="confirmHandler" @close="closeHandler">
      <b-row>
        <b-col sm="6">
          <label for="book_id">书籍编号:</label>
          <b-form-input id="book_id" v-model.trim="modalParams.bookParams.bookID" disabled></b-form-input>
        </b-col>
        <b-col sm="6">
          <label for="book_name">书籍名称:</label>
          <b-form-input id="book_name" v-model.trim="modalParams.bookParams.bookName"
            :disabled="modalParams.disabled"></b-form-input>
        </b-col>
      </b-row>
      <b-row>
        <b-col sm="6">
          <label for="book_counts">书籍数量:</label>
          <b-form-input id="book_counts" v-model.trim="modalParams.bookParams.bookCounts"
            :disabled="modalParams.disabled"></b-form-input>
        </b-col>
        <b-col sm="6">
          <label for="book_details">书籍详情:</label>
          <b-form-input id="book_details" v-model.trim="modalParams.bookParams.detail"
            :disabled="modalParams.disabled"></b-form-input>
        </b-col>
      </b-row>
    </b-modal>
  </b-container>
</template>
<script>
import { getBookList, postBookList, updateBook, deleteBook } from '../../api/book'
export default {
  name: "book-list",
  data() {
    return {
      //模态框参数
      modalParams: {
        mode: undefined,
        title: "书籍详情",
        disabled: true,
        centered: true,
        bookParams: {
          // bookID: "1",
          // bookName: "名称",
          // bookCounts: 13,
          // detail: "俗称"
        }
      },
      //查询条件
      queryParams: {
        bookName: "",//书籍名称
        detailInfo: "",//详细信息
      },
      //结果列表
      sortBy: 'bookID',//排序字段
      sortDesc: false,//fale-升序
      fields: [
        {
          key: "bookID",
          label: "编号",
          sortable: false,
        },
        {
          key: "bookName",
          label: "名称",
          sortable: false,
        },
        {
          key: "bookCounts",
          label: "数量/册",
          sortable: false,
        },
        {
          key: "detail",
          label: "详细信息",
          sortable: false,
        },
        {
          key: "show_details",
          label: "查看详情"
        }
      ],
      bookList: []
    }
  },
  created() {
    getBookList().then(({ data, msg, code }) => {
      this.bookList = data || []
    }).catch(err => {
      console.log(err)
    })
  },
  mounted() {

  },
  methods: {
    //按钮点击事件
    execute(type) {
      switch (type) {
        case 'cancel':
          this.cancelQuery()
          break
        case 'query':
          this.executeQuery()
          break
      }
    },
    //取消查询
    cancelQuery() {
      this.queryParams.bookName = ''
      this.queryParams.detailInfo = ''
      postBookList({}).then(({ data, msg, code }) => {
        this.bookList = data || []
      }).catch(err => {
        console.log(err)
      })
    },
    //执行查询
    executeQuery() {
      const { bookName, detailInfo } = this.queryParams
      const reqBody = {
        bookName: bookName,
        detail: detailInfo
      }
      postBookList(reqBody).then(({ data, msg, code }) => {
        this.bookList = data || []
      }).catch(err => {
        console.log(err)
      })
    },
    //结果列表按钮点击事件
    showBook(book) {
      this.modalParams.mode = 'detail';
      this.modalParams.disabled = true;
      Object.assign(this.modalParams.bookParams, book);
      // this.modalParams.visible = true;
      this.$bvModal.show("modal-1")
    },
    editBook(book) {
      this.modalParams.mode = 'edit';
      this.modalParams.disabled = false;
      Object.assign(this.modalParams.bookParams, book);
      this.$bvModal.show("modal-1")
    },
    deleteBook(book) {
      // this.modalParams.mode = 'delete';
      // this.modalParams.disabled = true;
      // this.modalParams.bookParams = book;
      // this.$bvModal.show("modal-1")
      //直接删除
      console.log('deleteBook', book);
      deleteBook({bookID:book?.bookID}).then(({ data, msg, code }) => {
        console.log('删除操作', data, msg, code);
        this.deleteBookItem(data);
      }).catch(err => console.log(err));
    },
    rowClickHandler(data, type) {
      console.log(data, type)
      switch (type) {
        case 'detail':
          this.showBook(data)
          break
        case 'edit':
          this.editBook(data)
          break
        case 'delete':
          this.deleteBook(data)
          break
      }
    },
    //更新书籍记录
    updateBookItem(bookDto) {
      console.log("原始数组", this.bookList)
      const index = this.bookList.findIndex(item => item?.bookID == bookDto?.bookID);
      console.log(bookDto, "检索下标", index)
      if (index !== -1) {
        this.bookList.splice(index, 1, bookDto)
      }
      console.log('updateBookItem', this.bookList);
    },
    //删除书籍信息
    deleteBookItem(bookID) {
      const index = this.bookList.findIndex(item => item?.bookID == bookID);
      if (index !== -1) {
        this.bookList.splice(index, 1);
      }
      console.log('deleteBookItem', this.bookList);
    },
    //确认书籍信息
    confirmHandler() {
      // this.modalParams.visible = false
      const { mode, bookParams } = this.modalParams;
      if (!!mode === false) return;
      switch (mode) {
        case 'detail':
          break
        case 'edit':
          console.log(bookParams)
          updateBook({
            bookID: bookParams.bookID,
            bookName: bookParams.bookName,
            bookCounts: bookParams.bookCounts,
            detail: bookParams.detail
          }).then((data, msg, code) => {
            // console.log('更新操作', data, msg, code)
            this.updateBookItem(data?.data);
          }).catch(err => {
            console.log(err);
          })
          break
        case 'delete':
          console.log('delete', this.modalParams.bookParams)
          break
      }
      this.$bvModal.hide("modal-1")
    },
    //关闭模态框
    closeHandler() {
      // this.modalParams.visible = false
      this.modalParams.mode = undefined;
      this.$bvModal.hide("modal-1")
    }
  }
}
</script>
<style lang="less" scoped>
.button-class {
  margin-right: 10px;
}

.btn-groups {
  text-align: right;

  button {
    margin-left: 10px;
  }
}
</style>